<template>
  <view class="appointment">
    <!-- 预约项目 -->
    <view class="appointment-goods-wrap">
      <text class="appointment-goods-title">预约项目</text>
      <text>测试的东西</text>
    </view>
    <!-- 预约日期 -->
    <view class="appointment-time-wrap">
      <text class="appointment-goods-title">预约项目（必填）</text>
      <view class="appointment-goods-date">
        <y-tabs :list="calendarList" :current="current" @tabTap="clickTabs">
          <view slot="right" class="appointment-icon-calendar">
            <u-icon
              name="calendar"
              size="52rpx"
              color="#ffbf01"
              label="选择"
              labelSize="24rpx"
              labelPos="bottom"
              labelColor="#ffbf01"
              top="-10rpx"
              space="0rpx"
              @click="Opencalendar"
            ></u-icon>
          </view>
        </y-tabs>
        <!-- 日历 -->
        <u-calendar
          :maxDate="maxDate"
          :show="showcalendar"
          :closeOnClickOverlay="true"
          color="#ffbf01"
          @confirm="confirm"
          @close="closeCalendar"
        >
        </u-calendar>
      </view>
      <u-divider></u-divider>
      <!-- 预约时间 -->
      <view class="appointment-goods-time-list">
        <view
          class="appointment-goods-time-normal appointment-goods-time-active"
        >
          <text>11:00</text>
        </view>
        <view class="appointment-goods-time-normal">
          <text>11:00</text>
        </view>
        <view class="appointment-goods-time-normal"><text>11:00</text></view>
        <view class="appointment-goods-time-normal"><text>11:00</text></view>
        <view class="appointment-goods-time-normal"><text>11:00</text></view>
        <view class="appointment-goods-time-normal appointment-goods-time-none">
          <text>11:00</text>
          <u-badge
            :type="type"
            value="已约满"
            bgColor="#c4c4c4"
            :absolute="true"
            :offset="[-8, -8]"
          ></u-badge>
        </view>
        <!-- 解决flex奇数 排了 最后一排靠左 -->
        <view
          v-for="(item, index) in rowNum"
          :key="index"
          class="appointment-goods-time-empty"
          style="visibility: hidden"
        ></view>
      </view>
    </view>
    <!-- 预约留言 -->
    <view class="appointment-message-wrap">
      <text class="appointment-goods-title">备注</text>
      <view class="appointment-textarea">
        <u--textarea
          v-model="appointmentMessage"
          placeholder="请输入内容"
          maxlength="100"
          count
        ></u--textarea>
      </view>
    </view>
    <!-- 顶部固定区域 -->
    <y-bottom-tab :isShowIcon="false" @buttonHandler="authUserInfo">
      <view class="bottom-text-area">
        <view class="bottom-text-area-date">
          <text>已选择：</text>
          <text>11:00 - 13:00</text>
        </view>
        <view class="bottom-text-area-price">
          <text>￥168</text>
        </view>
      </view>
    </y-bottom-tab>
  </view>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      calendarList: [],
      showcalendar: false,
      maxDate: "",
      rowNum: 4,
      appointmentMessage: "",
      current: 0,
    };
  },
  onLoad(options) {
    const { goodsId } = options;
    this.$moment = this.$utils.moment();
    this.init();
  },
  computed: {},
  methods: {
    ...mapActions("login", ["authUserInfo"]),
    init() {
      this.getMaxDate();
      this.getSevenDays();
    },
    getMaxDate() {
      this.maxDate = this.$moment().add(6, "d").format("YYYY-MM-DD");
    },
    getSevenDays() {
      let weekArr = [];
      for (let i = 0; i < 7; i++) {
        let dateVal = this.$moment().add(i, "d").format("MM.DD");
        let weekVal = this.$moment().add(i, "d").format("dddd");
        weekVal = weekVal.replace("星期", "周");
        weekArr.push({
          title: weekVal,
          subtitle: dateVal,
        });
      }
      this.calendarList = weekArr;
    },
    Opencalendar() {
      this.showcalendar = true;
    },
    closeCalendar() {
      this.showcalendar = false;
    },
    confirm(e) {
      if (e.length < 1) {
        this.$utils.showToast("请选择日期");
      } else {
        let chooseDate = e[0].split("-");
        let current;
        this.calendarList.forEach((item, index) => {
          if (item.subtitle == chooseDate[1] + "." + chooseDate[2]) {
            current = index;
          }
        });
        this.current = current;
        this.closeCalendar();
      }
    },
    clickTabs(current) {
      this.current = current;
    },
  },
};
</script>

<style>
page {
  background-color: #f4f4f4;
}
</style>
<style lang="scss" scoped>
.appointment {
  .appointment-goods-wrap,
  .appointment-time-wrap,
  .appointment-message-wrap {
    background: #ffffff;
    padding: 40rpx 40rpx;
    margin-bottom: 30rpx;
    .appointment-goods-title {
      font-size: 28rpx;
      padding: 0 100rpx 0 10rpx;
      border-left: 6rpx solid #ffbf01;
    }
  }
  .appointment-time-wrap {
    .appointment-goods-date {
      padding-top: 30rpx;
      .appointment-icon-calendar {
        box-shadow: -6px 0px 8px -6px rgba(206, 206, 206, 0.85);
        padding-left: 20rpx;
      }
    }
    .appointment-goods-time-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .appointment-goods-time-active,
      .appointment-goods-time-normal,
      .appointment-goods-time-none {
        width: 80rpx;
        padding: 10rpx 35rpx;
        margin-bottom: 40rpx;
        border-radius: 10rpx;
        text-align: center;
      }
      .appointment-goods-time-active {
        border: 1px solid #ffbf01 !important;
        background: rgb(251, 244, 225) !important;
        color: #ffbf01 !important;
      }
      .appointment-goods-time-normal {
        border: 1px solid #ededed;
        color: #333;
      }
      .appointment-goods-time-none {
        cursor: not-allowed;
        color: #b2b2b2 !important;
        border-color: #ededed !important;
        background: #eee !important;
        position: relative;
      }
      .appointment-goods-time-empty {
        padding: 10rpx 35rpx;
        width: 80rpx;
        height: 0px;
      }
    }
  }
  .appointment-message-wrap {
    .appointment-textarea {
      padding: 40rpx 0;
    }
  }
  .bottom-text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 80rpx;
    .bottom-text-area-date {
      width: 300rpx;
      color: #535353;
      font-size: 28rpx;
    }
    .bottom-text-area-price {
      font-size: 32rpx;
      color: #ffbf01;
      font-weight: 600;
      padding-top: 10rpx;
    }
  }
}
</style>
